<template>

  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

    <el-tab-pane label="详情" name="first" class="demo-tabs">
      {{pipename}}
    </el-tab-pane>
    <el-tab-pane label="用例分析" name="third" lazy="true">
      <el-button type="warning" plain>转任务</el-button>
      <el-button type="success" plain>重试计划</el-button>
      <el-button type="info" plain>批量回填</el-button>
      <Table v-model:data="userlist"  @selection-change="handleSelectionChange1">
        <el-table-column type="selection" width="55" />
        <el-table-column label="用户名" prop="username"/>
        <el-table-column label="角色" prop="Role"/>
      </Table>


      <div id="result">
        <el-input
            v-model="cur_case_form.result"
            :autosize="{ minRows: 2, maxRows: 8}"
            label-position="top"
            type="textarea"
            placeholder="请填写用例分析结论"
        />
        <el-select v-model="cur_case_form.fail_type" placeholder="请选择失败类型">
          <el-option v-for="item in type_list" :key="item" :label="item" :value="item"/>
        </el-select>
        <el-button type="success" plain>提交</el-button>
      </div>



    </el-tab-pane>
    <el-tab-pane label="历史记录" name="second" lazy="true">
      <el-table
          :data="tableData"
          stripe
          border
          height="700"
          max-height="700"
          style="width: 100%"
          :header-cell-style="{background:'rgba(200, 200, 200, 0.9) none repeat scroll 0% 0%',color:'rgb(33, 27, 38)','font-family':'Open Sans'}"
          :row-class-name="tableRowClassName"
      >
        <el-table-column prop="name" label="流水线名" width="180"/>
        <el-table-column prop="date" label="开始时间" width="180"/>
        <el-table-column prop="date" label="结束时间" width="180"/>
        <el-table-column prop="address" label="产品"/>
        <el-table-column prop="address" label="当前版本"/>
        <el-table-column prop="address" label="状态"/>
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="scope">
            <el-button type="success" link>
              <el-icon><Tickets /></el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background layout="prev, pager, next, jumper,sizes,total"
                     :total="300"
                     :pager-count="4"
                     :default-page-size="15"
                     :hide-on-single-page="value"
                     :page-sizes="[15, 30, 100, 200,500]"/>

    </el-tab-pane>

    <el-tab-pane label="统计报表" name="third" lazy="true">

    </el-tab-pane>

  </el-tabs>


</template>

<script lang="ts" setup>
import {useRoute} from "vue-router";
import {onMounted,ref} from "vue";
import Table from '@/components/common/Table.vue'
import {pipeline} from './js/pipeline'
const route = useRoute()
const activeName = ref('first')
const pipename = ref("")
const pipeinfo = ref({})
const type_list = ref(["脚本问题", "产品问题", "环境问题"])
const cur_case_form = ref({
  result:"",
  fail_type:""
})

onMounted(()=>{
  pipename.value = route.query.pipename
  pipeinfo.value = pipeline.Detail(pipename.value)
})

interface User {
  date: string
  name: string
  address: string
  switch: boolean
}

const tableData = []

</script>

<style scoped lang="scss">
@import "@/styles/table_header.scss";

#result {
  display: grid;
  grid-template-columns: 10fr 1fr 1fr;
  margin-bottom: 4px;
  width: 100%;
  padding: 0;
  align-items: center;
  margin-left: 10px
}
.el-table{
  max-height: 700px;
  height: 700px;
}
</style>
